﻿
@{
    Layout = null;
}
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>试听</title>
    <link href="~/Content/styles/palyer.css" rel="stylesheet" />
    <style>
        .Main {
            height: 80%;
            padding: 0 23%;
        }

        .musicInfo {
            margin-top: 30px;
            width: 100%;
            height: 215px;
        }

        .musicDesc {
            width: 100%;
            height: 200px;
            font-size: 14px;
            color: #343434;
            line-height: 30px;
        }

        .mLeft {
            float: left;
            width: 200px;
        }

        .mRight {
            width: 60%;
            float: left;
        }

        .title {
            height: 60px;
            width: 100%;
            line-height: 45px;
        }

    </style>

</head>
<body>
    <div id="app">
        <!--顶部-->
        <div class="top">
            <el-row>
                <el-col :span="5">
                    <div>
                        <img src="~/Content/imgs/logo.png" style="height: 37px; width: 135px;" />
                    </div>
                </el-col>
                <el-col :span="7">
                    <el-input placeholder="请输入内容" v-model="search">
                        <i slot="suffix" class="el-input__icon el-icon-search" style="cursor:pointer;" v-on:click="searchKey"></i>
                    </el-input>
                </el-col>
                <el-col :span="12">
                    <div class="top_item">
                        <a href="javascript:;">注册/登录<i class="el-icon-user"></i></a>
                        <a href="javascript:;">播放记录<i class="el-icon-time"></i></a>
                        <a href="/Car/BuyCar" target="_blank">
                            购物车 <el-badge :value="Carcount" class="item" type="primary">
                                <i class="el-icon-shopping-cart-1"></i>
                            </el-badge>
                        </a>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!--导航-->
        <div class="navi">
            <a href="/Home/Index">首页</a>
            <a href="/Music/MusicType">分类</a>
            <a href="/Music/NewCd">新碟</a>
            <a href="/Music/Singer">歌手</a>
            <a href="/Music/MusicRank">排行榜</a>
            <a href="/Music/RecomMusic">推荐歌单</a>
        </div>
        <div class="Main">
            <el-page-header v-on:back="goback" :content="musicInfo.name" style="margin-top:20px;">
            </el-page-header>
            <div class="musicInfo">
                <div class="mLeft">
                    <el-avatar :src="musicInfo.img" :size="200"></el-avatar>
                </div>
                <div class="mRight">
                    <el-row class="title">
                        <el-col :span="1">&nbsp;</el-col>
                        <el-col :span="4">歌曲名：</el-col>
                        <el-col :span="19">{{musicInfo.name}}</el-col>
                    </el-row>
                    <el-row class="title">
                        <el-col :span="1">&nbsp;</el-col>
                        <el-col :span="4">歌手：</el-col>
                        <el-col :span="19">{{musicInfo.singer}}</el-col>
                    </el-row><el-row class="title">
                        <el-col :span="1">&nbsp;</el-col>
                        <el-col :span="4">专辑：</el-col>
                        <el-col :span="19">{{musicInfo.album}}</el-col>
                    </el-row>
                </div>
            </div>
            <div class="audio green-audio-player">
                <div class="loading">
                    <div class="spinner"></div>
                </div>
                <div class="play-pause-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="24" viewBox="0 0 18 24">
                        <path fill="#566574" fill-rule="evenodd" d="M18 12L0 24V0" class="play-pause-icon" id="playPause">
                    </svg>
                </div>

                <div class="controls">
                    <span class="current-time">0:00</span>
                    <div class="slider" data-direction="horizontal">
                        <div class="progress">
                            <div class="pin" id="progress-pin" data-method="rewind"></div>
                        </div>
                    </div>
                    <span class="total-time">0:00</span>
                </div>

                <div class="volume">
                    <div class="volume-btn">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                            <path fill="#566574" fill-rule="evenodd" d="M14.667 0v2.747c3.853 1.146 6.666 4.72 6.666 8.946 0 4.227-2.813 7.787-6.666 8.934v2.76C20 22.173 24 17.4 24 11.693 24 5.987 20 1.213 14.667 0zM18 11.693c0-2.36-1.333-4.386-3.333-5.373v10.707c2-.947 3.333-2.987 3.333-5.334zm-18-4v8h5.333L12 22.36V1.027L5.333 7.693H0z" id="speaker">
                        </svg>
                    </div>
                    <div class="volume-controls hidden">
                        <div class="slider" data-direction="vertical">
                            <div class="progress">
                                <div class="pin" id="volume-pin" data-method="changeVolume"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <audio crossorigin>
                    <source :src="musicInfo.src" type="audio/mpeg">
                </audio>
            </div>
            <div class="musicDesc">
                <p style="font-size:16px;color:#141414">歌曲简介：</p>
                {{musicInfo.desc}}
            </div>

        </div>
        <!--底部-->
        <footer class="el-footer-css">
            <div> <a hidefocus="true">关于我们</a>| <a hidefocus="true">监督举报</a> | <a hidefocus="true">广告服务</a> | <a hidefocus="true">投诉指引</a> | <a>隐私政策</a> | <a>儿童隐私政策</a> | <a hidefocus="true">用户服务协议</a>  |  <a hidefocus="true">招聘信息</a> | <a hidefocus="true">客服中心</a> | <a hidefocus="true">用户体验提升计划</a></div>
        </footer>
    </div>
    <script src="~/Scripts/jquery.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data() {
                return {
                    search: '',
                    Carcount: 18,
                    musicInfo: {
                        name: '雅俗共赏',
                        singer: '许嵩',
                        album: '青年晚报',
                        img: '../img/20200314150305887.jpg',
                        desc: '  《青年晚报》专辑的创作灵感，来源于生活。整张专辑是许嵩对生活的记录，写的是许嵩内心的思考和观察.专辑的全部平面资料拍摄于法国巴黎，封面设计里融入上世纪九十年代每周二下午电视台停播时的背景画面元素。',
                        src: '../Content/许嵩 - 雅俗共赏.mp3',
                    }
                }
            },
            methods: {
                searchKey() {
                    if (this.search == '' || this.search == null) {
                    } else {
                        location.href = '/Home/SearchMusic?keyWord=' + this.search
                    }
                },
                goback() {
                    history.go(-1);
                }
            },
            mounted() {
                //axios.get('/Home/url').then(res => this.musicInfo.src = res.data)
            }

        })
    </script>
    <script src="~/Scripts/palyers.js"></script>
</body>
</html>